<template>
  <RjModal
    width="600px"
    :title="modalTitle"
    :visible="isVisible"
    @ok="onSave"
    @cancel="onCancel"
    :confirmLoading="isLoading"
  >
    <a-form-model
      ref="deviceGroupFormRef"
      :model="deviceGroupForm"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      labelAlign="left"
      :colon="false"
    >
      <a-form-model-item
        class="form-item"
        :label="$t('authDevice.groupName')"
        prop="name"
        :rules="formRuleObj.deviceGroupName"
      >
        <a-input v-model="deviceGroupForm.name" />
      </a-form-model-item>
    </a-form-model>
  </RjModal>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import { mapState, mapActions } from 'vuex';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
// import { maccApi } from '@/utils';
// import request from '@/utils/apis/request';
export default {
  name: 'authDeviceGroupModal',
  mixins: [authSysMixin],
  props: {},
  data() {
    return {
      operation: 'add',
      isLoading: false,
      deviceGroupForm: {
        name: '',
      },
      formRuleObj: {
        deviceGroupName: [
          {
            required: true,
            message: this.$t('common.mustEnter'),
            trigger: 'blur',
          },
          { validator: this.validDeviceGroupName, trigger: 'blur' },
        ],
      },
      isVisible: false,
    };
  },

  mounted() {},
  computed: {
    modalTitle() {
      if (this.operation === 'add') {
        return this.$t('authDevice.addGroup');
      } else {
        return this.$t('authDevice.editGroup');
      }
    },
  },
  methods: {
    resetForm() {
      this.deviceGroupForm = {
        name: '',
      };
    },

    validDeviceGroupName(rule, value, callback) {
      if (!value) {
        return callback(new Error(this.$t('common.mustEnter')));
      }
      const len = value.replace(/[^\x00-\xff]/g, '|||').length;
      if (len > 32) {
        return callback(new Error(this.$t('common.byteRange1To32AndChinese')));
      }
      callback();
    },

    openModal(record) {
      this.isVisible = true;

      if (record) {
        this.operation = 'edit';
        this.deviceGroupForm = { id: record.id, name: record.name };
      } else {
        this.operation = 'add';
      }
    },

    // 弹窗 确认
    onSave() {
      this.$refs.deviceGroupFormRef.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        this.saveDeviceGroup();
      });
    },

    async saveDeviceGroup() {
      this.isLoading = true;

      let api = '';
      let method = '';
      let params = { ...this.deviceGroupForm };
      let successTxt = '';
      if (this.operation === 'add') {
        api = maccApi.PRIVATE_DEVICE_GROUP_ADD_POST_API;
        method = 'POST';
        params = {
          ...params,
          tenantId: this.tenantInfo.tenantId,
          groupId: this.groupId,
        };
        successTxt = this.$t('common.addSuceess');
      } else {
        api = maccApi.PRIVATE_DEVICE_GROUP_UPDATE_PUT_API;
        method = 'PUT';
        successTxt = this.$t('common.editSuccess');
      }

      const res = await this.requestHttpAuth({
        api,
        method,
        params,
      });
      this.isLoading = false;
      if (res.data.success) {
        this.isVisible = false;
        this.resetForm();
        this.$emit('refreshList');

        // dev中的用户组要强制刷新下
        this.$EventBus.$emit('authDevice/refreshGroupList');

        this.$message.success(successTxt);
      } else {
        this.$message.warning(res.data.message);
      }
    },

    // 弹窗 取消
    onCancel() {
      this.isLoading = false;
      this.resetForm();
      this.isVisible = false;

      // // 更新serverGrp配置
      // this.callbackAfterClose && this.callbackAfterClose();
    },
  },
};
</script>

<style lang="less" scoped>
@import url('@/project/authSys/assets/skin/common.less');
</style>
